<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/shop.css">
    <title>Title</title>
</head>
<body>

<style>
    @font-face {
        font-family: 'huayuan';
        src: url(font/花园肉丸.ttf);
    }

    @font-face {
        font-family: 'cm';
        src: url(font/Begilas.otf);
    }

    .display {
        overflow-y: auto;
        overflow-x: hidden;
        width: 700px;
        font-family: cm;
        margin: 0 auto;
        position: relative;
        top: 30px;
        max-height: 600px;
    }

    table {
        width: 80%;
    }

    .userInfo {
        font-size: 20px;

    }

    .userInfo p {
        display: inline;
    }

    .userInfo h3 {
        display: inline;
        font-size: 26px;
    }
</style>

<div class="display">
    <div id="Catalog">
        <div class="userInfo">
            <h3 style="font-family: huayuan;">用户信息</h3>
            <h3>User Information</h3><br>
            User ID:
            <P style="color: rgb(190, 158, 111);" th:text="${session.loginUser.getUsername()}"></P>
        </div>

        <form action="saveAccount" method="post">

            <table class="changePassword">
                <tr>
                    <td>New password:</td>
                    <td><input type="text" name="password"/></td>
                </tr>
                <tr>
                    <td>Repeat password:</td>
                    <td><input type="text" name="repeatedPassword"/></td>
                </tr>
            </table>

            <!--            <%@ include file="accountFields.jsp" %>-->
            <table>
                <tr>
                    <td>First name:</td>
                    <td><input type="text" name="firstname" th:value="${session.account.firstName}"/>
                    </td>
                </tr>
                <tr>
                    <td>Last name:</td>
                    <td><input type="text" name="lastname" th:value="${session.account.lastName}"/></td>
                </tr>
                <tr>
                    <td>Email:</td>
                    <td><input type="text" name="email" th:value="${session.account.email}"/></td>
                </tr>
                <tr>
                    <td>Phone:</td>
                    <td><input type="text" name="phone" th:value="${session.account.phone}"/></td>
                </tr>
                <tr>
                    <td>Address 1:</td>
                    <td><input type="text" name="address1" th:value="${session.account.address1}"/></td>
                </tr>
                <tr>
                    <td>Address 2:</td>
                    <td><input type="text" name="address2" th:value="${session.account.address2}"/></td>
                </tr>
                <tr>
                    <td>City:</td>
                    <td><input type="text" name="city" th:value="${session.account.city}"/></td>
                </tr>
                <tr>
                    <td>State:</td>
                    <td><input type="text" name="state" th:value="${session.account.state}"/></td>
                </tr>
                <tr>
                    <td>Zip:</td>
                    <td><input type="text" name="zip" th:value="${session.account.zip}"/>
                    </td>
                </tr>
                <tr>
                    <td>Country:</td>
                    <td><input type="text" name="country" th:value="${session.account.country}"/></td>
                </tr>
            </table>

            <h3>Profile Information</h3>

            <table>
                <tr>
                    <td>Language Preference:</td>
                    <td>
                        <select name="languagePreference">
                            <div th:if="${session.account==null}">
                                <option value="English">English</option>
                                <option value="Chinese">Chinese</option>
                            </div>
                            <div th:if="${session.account!=null}">
                                <div th:if="${session.profile.getLangpref()=='English'}">
                                    <option value="English">English</option>
                                    <option value="Chinese">Chinese</option>
                                </div>
                                <div th:if="${session.profile.getLangpref()=='Chinese'}">
                                    <option value="Chinese">Chinese</option>
                                    <option value="English">English</option>
                                </div>
                            </div>
                        </select>

                    </td>
                </tr>
                <tr>
                    <td>Favourite Category:</td>
                    <td>
                        <select name="favouriteCategoryId">
                            <div th:if="${session.account!=null}">
                                <option th:value="${session.profile.getFavcategory()}"
                                        th:text="${session.profile.getFavcategory()}"></option>
                                <div th:each="category : ${session.categories}">
                                    <div th:if="${!session.profile.getFavcategory().equals(category.categoryId)}">
                                        <option th:value="${category.categoryId}"
                                                th:text="${category.categoryId}"></option>
                                    </div>
                                </div>
                            </div>
                            <div th:if="${session.account==null}">
                                <div th:each="category : ${session.categories}">
                                    <option th:value="${category.categoryId}" th:text="${category.categoryId}"></option>
                                </div>
                            </div>
                        </select>
                    </td>

                </tr>
                <tr>
                    <td>Enable MyList</td>
                    <td>
                        <input type="checkbox" id="listOption" name="listOption"
                               th:checked="${session.profile.getMylistopt()}" th:value="listOption">
                    </td>
                </tr>
                <tr>
                    <td>Enable MyBanner</td>
                    <td>
                        <input type="checkbox" id="bannerOption" name="bannerOption"
                               th:checked="${session.profile.getBanneropt()}" th:value="bannerOption">
                    </td>
                </tr>


            </table>

            <div id="draw-border" style="position: relative;top: 30px;right: 200px">
                <button type="submit" name="editAccount" value="Save Account Information">SAVE</button>
            </div>

        </form>
        <div id="draw-border" style="position:relative;bottom: 20px;left: 170px"><a
                th:href="@{orderList(username=${session.loginUser.username})}">
            <button>My Order</button>
        </a></div>
        \
    </div>
</div>

</body>
</html>